<template>
  <div class="gender-select-wrapper">
    <select class="form-select" v-model="selectedGender" :disabled="isDisabled">
      <option value="1">男</option>
      <option value="2">女</option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue'],
  data() {
    return {
      selectedGender: this.modelValue
    };
  },
  watch: {
    selectedGender(newValue) {
      this.$emit('update:modelValue', newValue);
    }
  },
  computed: {
    isDisabled() {
      return this.disabled;
    }
  }
};
</script>

<style scoped>
.gender-select-wrapper select {
  padding: 5px;
  font-size: 14px;
}
</style>